<!DOCTYPE html>
<!-- saved from url=(0068)http://www.17sucai.com/preview/709282/2017-05-09/points/detail.html# -->
<html lang="zh-CN" style="font-size: 34.722px;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>详情页</title>
    <link rel="stylesheet" type="text/css" href="/css/shop/base.css">
    <link rel="stylesheet" type="text/css" href="/css/shop/detail.css">
    <link rel="stylesheet" type="text/css" href="/css/shop/loaders.min.css">
    <link rel="stylesheet" type="text/css" href="/css/shop/loaders.min.css">
    <link rel="stylesheet" type="text/css" href="/css/shop/loading.css">
    <link rel="stylesheet" href="/css/shop/swiper.min.css">
    <script src="/js/shop/rem.js"></script>
    <script src="/js/shop/jquery.min.js" type="text/javascript"></script>
    <script src="/js/shop/others.js"></script>
    <script src="/js/shop/swiper.jquery.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <script type="text/javascript">
        $(window).load(function () {
            $(".loading").addClass("loader-chanage")
            $(".loading").fadeOut(300)


            var itemId = getParams().id;
            var typeId = null;
            // 查询商品信息
            if (itemId) {
                $.get('/items/' + itemId + "/info", function (data) {
                    console.log(data);
                    typeId = data.type;
                    $('.item').renderValues(data, {
                        // 拼接id到超链接
                        setValue: function (item, value) {
                            var str = "销量" + value + "件";
                            $(item).html(str);
                        }
                    });

                    // 商品参数回显
                    $.get('/itemParams/' + typeId, function (subData) {
                        console.log(subData);
                        $('.box-s').renderValues({list: subData}, {
                            getId: function (item, value) {
                                //保存参数id
                                $(item).attr("id", value);
                            }
                        });
                        $('#itemInfo').renderValues(data);
                        // 选中商品参数加active样式
                        $(".middle .xia li").click(function () {
                            $(this).addClass('cur').siblings().removeClass('cur');
                        });

                    });

                });
            }

            // 商品加购物车数量
            var count = $('#count').text();
            $('#down').click(function () {
                if (count > 1) {
                    count--;
                } else {
                    count = 1;
                }
                $('#count').text(count);
            });

            $('#plus').click(function () {
                count++;
                $('#count').text(count);
            });


            var params = '';
            // 提交订单到购物车
            $('#confirmBtn').click(function () {
                $.each($('.cur'), function (index, value) {
                    params += $(value).text() + " ";
                });
                var user = JSON.parse(window.sessionStorage.getItem("user"));
                var userId = user.id;

                // 发送到购物车
                $.post('/users/items', {
                    params: params,
                    count: count,
                    "item.id": itemId,
                    "user.id": userId
                }, function (data) {
                    if (data.success) {
                        window.location.href = '/mine/shopcar.html';
                    }
                });

            });

        })

        function toshare() {
            $(".am-share").addClass("am-modal-active");
            if ($(".sharebg").length > 0) {
                $(".sharebg").addClass("sharebg-active");
            } else {
                $("body").append('<div class="sharebg"></div>');
                $(".sharebg").addClass("sharebg-active");
            }
            $(".sharebg-active,.share_btn").click(function () {
                $(".am-share").removeClass("am-modal-active");
                setTimeout(function () {
                    $(".sharebg-active").removeClass("sharebg-active");
                    $(".sharebg").remove();
                }, 300);
            })
        }
    </script>
</head>
<!--loading页开始-->
<body>
<div class="loading loader-chanage" style="display: none;">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->

<!--header star-->
<header class="mui-bar mui-bar-nav" id="header">
    <a class="btn" href="javascript:history.go(-1)">
        <i class="iconfont icon-fanhui"></i>
    </a>
    <h4>商品详情</h4>
</header>
<!--header end-->

<div class="warp warptwo clearfloat">
    <div class="detail clearfloat item">
        <!--banner star-->
        <div class="banner swiper-container swiper-container-horizontal">
            <div class="swiper-wrapper"
                 style="transition-duration: 0ms; transform: translate3d(-1125px, 0px, 0px);">
                <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="3"
                     style="width: 375px;">
                    <a href="javascript:void(0)">
                        <img class="swiper-lazy swiper-lazy-loaded" alt="" render-src="imageUrl">
                    </a>
                </div>
                <div class="swiper-slide" data-swiper-slide-index="0" style="width: 375px;">
                    <a href="javascript:void(0)">
                        <img class="swiper-lazy swiper-lazy-loaded" alt="" render-src="imageUrl">
                    </a>
                </div>
                <div class="swiper-slide" data-swiper-slide-index="0" style="width: 375px;">
                    <a href="javascript:void(0)">
                        <img class="swiper-lazy swiper-lazy-loaded" alt="" render-src="imageUrl">
                    </a>
                </div>
                <div class="swiper-slide" data-swiper-slide-index="0" style="width: 375px;">
                    <a href="javascript:void(0)">
                        <img class="swiper-lazy swiper-lazy-loaded" alt="" render-src="imageUrl">
                    </a>
                </div>

            </div>
            <div class="swiper-pagination swiper-pagination-clickable"><span
                    class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span
                    class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span
                    class="swiper-pagination-bullet"></span></div>
        </div>
        <!--banner end-->
        <div class="top clearfloat box-s">
            <div class="shang clearfloat">
                <div class="zuo clearfloat fl over2 box-s" render-html="description">

                </div>
                <div class="you clearfloat fr">
                    <i class="iconfont icon-fenxiang"></i>
                    <p>分享</p>
                </div>
            </div>
            <div class="xia clearfloat">
                <p class="jifen fl box-s"><samp render-html="price"></samp>积分</p>
                <span class="fr" render-fun="setValue" render-key="count"></span>
            </div>
        </div>
        <div class="middle clearfloat box-s">
            <a href="#">
                <span class="fl">商品参数</span>
                <i class="iconfont icon-jiantou1 fr"></i>
            </a>
        </div>
        <div class="middle clearfloat box-s">
            <a href="#">
                <span class="fl">商品评价</span>
                <i class="iconfont icon-jiantou1 fr"></i>
            </a>
        </div>
    </div>
</div>

<!--footerone star-->
<div class="footerone clearfloat">
    <div class="left clearfloat fl">
        <ul>
            <li style="display: flex;justify-content: center; align-items: center;padding-top: 0;">
                <div>
                    <a href="#">
                        <i class="iconfont icon-shangcheng"></i>
                        <p>商城</p>
                    </a>
                </div>
            </li>
            <li style="display: flex;justify-content: center; align-items: center;padding-top: 0;">
                <div>
                    <a href="#">
                        <i class="iconfont icon-kefu1"></i>
                        <p>客服</p>
                    </a>
                </div>
            </li>
        </ul>
    </div>
    <div class="right clearfloat fl">
        <span class="btn fl" onClick="toshare()">加入购物车</span>
        <a href="javascript:; " onClick="toshare()" class="btn btnone fl">立即购买</a>
    </div>
</div>
<!--footerone end-->


<!--弹出购物车内容-->
<div class="am-share" id="paramsInfo">
    <div class="am-share-footer">
        <button class="share_btn"><img src="/img/shop/chahao.png"></button>
    </div>
    <div class="am-share-sns box-s">
        <div class="sdetail clearfloat">
            <div class="top clearfloat" id="itemInfo">
                <div class="tu clearfloat fl">
                    <span></span>
                    <img render-src="imageUrl">
                </div>
                <div class="you clearfloat fl">
                    <p class="tit" render-html="name"></p>
                    <span render-html="price"></span><span>积分</span>
                </div>
            </div>
            <div render-loop="list">
                <div class="middle clearfloat">
                    <p render-html="list.param"></p>
                    <div class="xia clearfloat">
                        <ul render-loop="list.subParams">
                            <li data-id="" render-fun="getId" render-key="list.subParams.id" class="ra3"
                                render-html="list.subParams.param"></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="bottom clearfloat">
                <p class="fl">购买数量</p>
                <div class="you clearfloat fr">
                    <ul>
                        <li id="down"><img src="/img/shop/jian.jpg"></li>
                        <li id="count">1</li>
                        <li id="plus"><img src="/img/shop/jia.jpg"></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <a href="javascript:;" class="shop-btn db" id="confirmBtn">确定</a>
</div>
<!--footer star-->
<footer class="page-footer fixed-footer" id="footer">
    <ul>
        <li>
            <a href="/mine/shop.html">
                <i class="iconfont icon-shouye"></i>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="/mine/itemcatalog.html">
                <i class="iconfont icon-icon04"></i>
                <p>分类</p>
            </a>
        </li>
        <li class="active">
            <a href="/mine/shopcar.html">
                <i class="iconfont icon-gouwuche"></i>
                <p>购物车</p>
            </a>
        </li>
        <li>
            <a href="/mine/profiles.html">
                <i class="iconfont icon-yonghuming"></i>
                <p>我的</p>
            </a>
        </li>
    </ul>
</footer>


</body>
</html>